
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-button
          type="warning"
          plain
          icon="el-icon-close"
          size="mini"
          @click="handleClose"
        >返回</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="showWidth().originWidth"  v-if="pageData.origin" class="card-box">
        <el-card>
          <div slot="header">
            <span>
<!--              <i class="el-icon-cpu"> </i>-->
              <img class="w-8 mr-2" src="" alt="">
              原素材</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div class="cell" v-html="pageData.originTitle" style="margin-bottom: 25px;height: 31px;font-weight: 700;font-size: 26px;line-height: 36px;"></div>
            <div class="cell"  v-html="pageData.origin"></div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="showWidth().artContentWidth" v-if="pageData.artContent"  class="card-box">
        <el-card>
          <div slot="header"><span>
<!--            <i class="el-icon-tickets"></i>    -->
             <img class="w-8 mr-2" src="" alt="">
            生成结果</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">


            <div class="cell" v-html="pageData.artTitle"  style="margin-bottom: 25px;font-weight: 700;font-size: 19px;"></div>
            <div class="cell" v-html="pageData.artContent"></div>

          </div>
        </el-card>
      </el-col>




    </el-row>
  </div>
</template>





<script>
  import { getContent,getTopicContent } from "@/api/article/viewArt";


  export default {
    name: "viewArt",
    data() {
      return {
        urlMd5:null,
        pageData:{},
        opentype:null
      }

    },
    computed:{
      originShow:function(){
        return this.pageData.origin;
      },
      artContentShow:function(){
        return this.pageData.artContent;
      }

    },
    created() {
      const keyValue = this.$route.params && this.$route.params.urlMd5;
      const type = this.$route.params && this.$route.params.type;

      this.showDetail(keyValue,type);
      this.openLoading();
      this.opentype = type;
    },
    methods: {
      showDetail(keyValue,type){
        if(type=='topic'){
          getTopicContent(keyValue).then(response => {
            this.pageData = response;
              this.pageData.origin = null;
            this.$modal.closeLoading();
          });
        }else{
          getContent(keyValue).then(response => {
            this.pageData = response;
            if('gen'===type){
              this.pageData.origin = null;
            }
            if('spider'===type&&!this.isEmpty(this.pageData.origin)){
              this.pageData.artContent = null;
            }
            // this.pageData.origin = null;
            // this.pageData.artContent = null;
            this.$modal.closeLoading();
          });
        }

      },
      /** 返回按钮操作 */
      handleClose() {

        if(this.opentype==='gen'){
          const obj =  { path: "/gpt/genArticle" };
          this.$tab.closeOpenPage(obj);
        }else if(this.opentype==='topic'){
          const obj =  { path: "/topic/topicTitle" };
          this.$tab.closeOpenPage(obj);
        }else{
          const obj =  { path: "/gpt/spiderArticle" };
          this.$tab.closeOpenPage(obj);
        }

      },
      showWidth(){
        let originWidth=0;
        let artContentWidth=0;
        if(this.isEmpty(this.pageData.origin)&&!this.isEmpty(this.pageData.artContent)){
          artContentWidth = 24;
          originWidth=0;
        }else
        if(!this.isEmpty(this.pageData.origin)&&this.isEmpty(this.pageData.artContent)){
          artContentWidth = 0;
          originWidth=24;
        }else
        if(!this.isEmpty(this.pageData.origin)&&!this.isEmpty(this.pageData.artContent)){
          artContentWidth = 12;
          originWidth=12;
        }else{
          artContentWidth = 12;
          originWidth=12;
        }
        let swidth = {
          artContentWidth:artContentWidth,
          originWidth:originWidth
        }

        return swidth;
      },
      isEmpty(str){
        if (!str || str == "undefined" || str == "null") {
          return true;
        }else{
          return false;
        }
      },
      // 打开加载层
      openLoading() {
        this.$modal.loading("正在加载数据，请稍候！");
      }
    }

  }
</script>
<style>

  .flex {
    display: flex;
  }

  a{
    color: #2196F3 !important;
  }
  .w-8 {
    width: 2rem;
    float: left;
  }
  .mr-2 {
    margin-right: 0.5rem;
  }

  .article-box{
    background: #fff;
    padding: 20px;
  }
  h2,h3{
    color: #0b0a0a !important;
  }
</style>
